<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-12-09 16:57:54
 * @LastEditTime: 2020-04-26 22:50:43
 * @FilePath: \blog-pages\src\views\admin\Setting.vue
 * @Description: 工具
 -->
<template>
  <b-container class="main bg-img">
    <b-tabs pills vertical fill>
      <b-tab title="个人信息" active>
        <b-form-group label-cols="4" label-cols-lg="2" label="姓名">
          <b-form-input v-model="name"></b-form-input>
        </b-form-group>
        <b-form-group label-cols="4" label-cols-lg="2" label="笔名">
          <b-form-input v-model="penName"></b-form-input>
        </b-form-group>
        <b-form-group label-cols="4" label-cols-lg="2" label="头像地址">
          <b-form-input v-model="avatar"></b-form-input>
        </b-form-group>
        <b-form-group label-cols="4" label-cols-lg="2" label="座右铭">
          <b-form-input v-model="motto"></b-form-input>
        </b-form-group>
        <b-form-group label-cols="4" label-cols-lg="2" label="内心独白">
          <b-form-textarea rows="15" v-model="introduction"></b-form-textarea>
        </b-form-group>
        <b-button variant="success" class="pull-right" @click="subProfile">提交</b-button>
      </b-tab>
      <b-tab title="网站导航">
        <b-card-text>定制网站导航，使用markdown语法</b-card-text>
        <b-textarea rows="20" class="mt-10" v-model="content"></b-textarea>
        <b-button
          variant="success"
          class="pull-right mt-10"
          @click="subWebsites"
          v-model="content"
        >提交</b-button>
      </b-tab>
      <b-tab title="备份与恢复">
        博客数据导出
        <b-button variant="outline-primary" @click="exportData()" class="pull-right">导出</b-button>
        <hr />博客数据恢复
        <b-form-file v-model="blogData" browse-text="选择文件" placeholder="请选择博客数据文件" class="mt-10"></b-form-file>
        <b-button class="mt-10 pull-right" variant="outline-primary" @click="importData()">上传</b-button>
      </b-tab>
    </b-tabs>
  </b-container>
</template>

<script>
import urls from "@/request/url";
import { mapState } from "vuex";
export default {
  name: "Setting",
  data() {
    return {
      blogData: null,
      name: "",
      penName: "",
      avatar: "",
      motto: "",
      introduction: "",
      content: ""
    };
  },
  computed: {
    ...mapState({
      adminToken: state => state.app.adminToken
    })
  },
  methods: {
    exportData() {
      let a = document.createElement("a");
      a.href = urls.baseUrl + urls.admin.export + "?token=" + this.adminToken;
      a.click();
    },
    importData() {
      if (!this.blogData) {
        return;
      }
      let formData = new FormData();
      formData.append("blogData", this.blogData);
      this.$axios
        .post(urls.admin.import, formData, {
          "Content-Type": "multipart/form-data"
        })
        .then(res => {
          this.$bvToast.toast("数据恢复成功", {
            title: "提示",
            variant: "success",
            solid: true,
            toaster: "b-toaster-top-center"
          });
        })
        .catch(err => {
          this.$bvToast.toast("数据恢复失败", {
            title: "提示",
            variant: "danger",
            solid: true,
            toaster: "b-toaster-top-center"
          });
        });
    },
    subProfile() {
      this.$axios
        .post(urls.admin.profile, {
          name: this.name,
          penName: this.penName,
          avatar: this.avatar,
          motto: this.motto,
          introduction: this.introduction
        })
        .then(res => {
          this.$bvToast.toast(res.data.msg, {
            title: "提示",
            variant: "success",
            solid: true,
            toaster: "b-toaster-top-center"
          });
        });
    },
    subWebsites() {
      this.$axios
        .post(urls.comm.websites, {
          key: "websites",
          value: this.content
        })
        .then(res => {
          this.$bvToast.toast(res.data.msg, {
            title: "提示",
            variant: "success",
            solid: true,
            toaster: "b-toaster-top-center"
          });
        });
    }
  },
  created() {
    this.$axios.get(urls.comm.profile).then(res => {
      let profile = res.data;
      if (profile) {
        this.penName = profile.penName;
        this.name = profile.name;
        this.avatar = profile.avatar;
        this.motto = profile.motto;
        this.introduction = profile.introduction;
      }
    });
  }
};
</script>

<style scoped>
</style>